import Utils from "./Utils.js";
import TimeManager from "./TimeManager.js";
export default class Carousel extends EventTarget {
    static cssBool = false;
    static SPEED = 20;
    static CHANGE_IMAGE_EVENT = "change_image_event";
    static LEFT = Symbol();
    static RIGHT = Symbol();
    list = [];
    imgCon;
    left;
    right;
    prev;
    first = 0;
    x = 0;
    data;
    iconDirection;
    constructor(data) {
        super();
        this.data = data.imgList;
        this.elem = document.createElement("div");
        this.elem.className = "carousel";
        this.render();
        this.imgCon = this.elem.querySelector(".img-cons");
        this.left = this.elem.querySelector(".left")
        this.right = this.elem.querySelector(".right")
        this.imgCon.addEventListener("mouseover", e => this.mouseoverHandler(e));
        if (this.data) this.setData(this.data);
        Carousel.setCSS();
        this.left.addEventListener("click", e => this.bnClickHandler(e));
        this.right.addEventListener("click", e => this.bnClickHandler(e));
    }
    render() {
        this.elem.innerHTML = `<div class="left"></div>
        <div class="carousel-con">
            <div class="img-cons">
            </div>
        </div>
        <div class="right"></div>`
    }
    setData(list) {
        this.list=list;
        list.constructor === Array ? (list = list) : (list = list.imgList)
        this.imgCon.innerHTML = '';
        this.imgCon.innerHTML = list.reduce((value, t, i) => {
            return value += `<img src='${t}' id='${i}'>`
        }, "")
        this.imgCon.style.width = list.length * 108 + "px";
        this.changeFirst();
    }
    changeFirst() {
        if (!this.imgCon.firstElementChild) return;
        var evt = new Event("mouseover", {
            bubbles: true
        });
        this.imgCon.firstElementChild.dispatchEvent(evt);
    }
    appendTo(parent) {
        if (typeof parent === "string") parent = document.querySelector(parent);
        if (parent) parent.appendChild(this.elem);
        this.changeFirst();
    }
    mouseoverHandler(e) {
        if (e.target.nodeName !== "IMG") return;
        this.changePrev(e.target);
    }
    bnClickHandler(e) {
        if (e.currentTarget === this.right && this.first + 4 !== this.list.length) {
            this.first += 4;
            if (this.first + 4 > this.list.length - 1) this.first = this.list.length - 4;
            this.iconDirection = Carousel.LEFT;
        } else if (e.currentTarget === this.left && this.first !== 0) {
            this.first -= 4;
            if (this.first <= 0) this.first = 0;
            this.iconDirection = Carousel.RIGHT;
        } else return;

        TimeManager.getInstance().add(this);
    }
    update() {
        if (this.iconDirection === Carousel.LEFT) {
            this.x -= Carousel.SPEED
            if (this.x <= -this.first * 74) {
                this.x = -this.first * 74;
                TimeManager.getInstance().remove(this);
            }
        } else if (this.iconDirection === Carousel.RIGHT) {
            this.x += Carousel.SPEED;
            if (this.x >= -this.first * 74) {
                this.x = -this.first * 74;
                console.log(this.x);
                console.log(this);
                TimeManager.getInstance().remove(this);
            }
        }
        this.imgCon.style.left =this.x + "px";
    }
    changePrev(elem) {
        if (this.prev) {
            this.prev.style.borderColor = "transparent"
        }
        this.prev = elem;
        this.prev.style.borderColor = "black";
        this.dispatch(elem);
    }
    dispatch(elem) {
        var evt = new Event(Carousel.CHANGE_IMAGE_EVENT);
        evt.scr = elem.src;
        this.dispatchEvent(evt);
    }
    static setCSS() {
        if (Carousel.cssBool) return;
        Carousel.cssBool = true;
        Utils.setCss(`
        .carousel{
            position: absolute;
            top: 550px;
            width: 372px;
            height: 58px;
        }
        .carousel>.left{
            width: 22px;
            height: 32px;
            background-image: url(../../js/carousel/swiper/img/download.png);
            float: left;
            margin-top: 12px;
            position: relative;
           
        }
        .carousel>.right{
            width: 22px;
            height: 32px;
            background-image:  url(../../js/carousel/swiper/img/download-1.png);
            background-position: -78px 0;
            float: left;
            top: 12px;
            position: absolute;
            right: 0;
        }
        .carousel>.carousel-con{
            float: left;
            width: 300px;
            height: 58px;
            overflow: hidden;
            position: absolute;
            margin: auto;
            left: 0px;
            right: 0;
        }
        .carousel .carousel-con .img-cons
        {
          margin-left:5px;
            height: 58px;
            font-size: 0;
            left: 0;
            position: absolute;
            overflow: hidden;
        }
        .carousel>.carousel-con>.img-cons>img{
          
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 0 5px;
            margin-right:10px;
        }
        `)
    }
}